window.addEventListener("load", function () {
    // carousel01
    new Swiper('.render-carousel-01-swiper',
        {
            autoplay: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                bulletClass: ['swiper-pagination-bullet', 'render-carousel-01-swiper-pagination-bullet'].join(' '),
                bulletActiveClass: ['swiper-pagination-bullet-active', 'render-carousel-01-swiper-pagination-bullet-active'].join(' '),
            },
        })
    // introduction01
    new Swiper('.render-introduction-01-swiper',
        {
            autoplay: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                bulletClass: ['swiper-pagination-bullet', 'render-introduction-01-swiper-pagination-bullet'].join(' '),
                bulletActiveClass: ['swiper-pagination-bullet-active', 'render-introduction-01-swiper-pagination-bullet-active'].join(' '),
            },
        })
    // course01
    const cateogryNodes = document.querySelectorAll('.render-course-01-category')
    cateogryNodes.forEach(function (node) {
        node.addEventListener("click", function (ev) {
            const targetListCls = '.' + ev.currentTarget.dataset['category']
            Array.from(ev.currentTarget.parentElement.children).forEach(function (node) {
                node.classList.remove('render-course-01-category-current')
            })
            ev.currentTarget.classList.add('render-course-01-category-current')
            const container = ev.currentTarget.parentElement.parentElement
            const targetList = container.querySelector(targetListCls)
            if (targetList) {
                const targetLists = container.querySelectorAll('.render-course-01-courses')
                targetLists.forEach(function (node) {
                    node.classList.remove('render-course-01-courses-current')
                })
                targetList.classList.add('render-course-01-courses-current')
            }
        })
    })
    // teacher01
    new Swiper(".render-teacher-01-swiper", {
        autoplay: true,
        pagination: false,
        slidesPerView: "auto",
        spaceBetween: 10,
        centeredSlides: true,
        slideActiveClass: 'render-teacher-01-swiper-slide-active'
    });
    
    // honor01
    new Swiper(".render-honor-01-swiper", {
        autoplay: true,
        loop: true,
        pagination: false,
        slidesPerView: 'auto',
        spaceBetween: 10,
        centeredSlides: true,
        slideActiveClass: 'render-honor-01-swiper-slide-active'
    });

    console.log('evaluation');
    
    // evaluation01
    new Swiper(".render-evaluation-01-swiper", {
        autoplay: true,
        loop: true,
        pagination: true,
        slidesPerView: 'auto',
        spaceBetween: 0,
        centeredSlides: true,
        slideActiveClass: 'render-evaluation-01-swiper-slide-active',
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            renderBullet: function (index, className) {
              return '<span class="' + className + '">'+ "</span>";
            },
          },
    });
    // album01
    const albumNodes = document.querySelectorAll('.render-album-01-item')
    albumNodes.forEach(function (node) {
        node.addEventListener("click", function (ev) {
            const targetListCls = '.' + ev.currentTarget.dataset['album']
            Array.from(ev.currentTarget.parentElement.children).forEach(function (node) {
                node.classList.remove('render-album-01-item-active')
            })
            ev.currentTarget.classList.add('render-album-01-item-active')
            const container = ev.currentTarget.parentElement.previousElementSibling
            const targetList = container.querySelector(targetListCls)
            if (targetList) {
                const targetLists = container.querySelectorAll('.render-album-01-preview')
                targetLists.forEach(function (node) {
                    node.classList.remove('render-album-01-preview-active')
                })
                targetList.classList.add('render-album-01-preview-active')
            }
        })
    })
});

